<template>
    <!-- header -->
    <div class="nav-container page-component">
      <!--左侧导航 #start -->
      <div class="nav left-nav">
        <div class="nav-item ">
          <span class="v-link clickable dark" onclick="javascript:window.location='/user'">实名认证 </span>
        </div>
        <div class="nav-item selected">
          <span class="v-link selected dark" onclick="javascript:window.location='/order'"> 挂号订单 </span>
        </div>
        <div class="nav-item ">
          <span class="v-link clickable dark" onclick="javascript:window.location='/patient'"> 就诊人管理 </span>
        </div>
        <div class="nav-item ">
          <span class="v-link clickable dark"> 修改账号信息 </span>
        </div>
        <div class="nav-item ">
          <span class="v-link clickable dark"> 意见反馈 </span>
        </div>
      </div>
      <!-- 左侧导航 #end -->
      <!-- 右侧内容 #start -->
      <div class="page-container">
        <div class="order-detail">
          <div class="title"> 挂号详情</div>
          <div class="status-bar">
            <div class="left-wrapper">
              <div class="status-wrapper BOOKING_SUCCESS">
                <span class="iconfont"></span> {{ orderInfo.param.orderStatusString }}
              </div>
            </div>
            <div class="right-wrapper">
              <!-- <img src="//img.114yygh.com/static/web/code_order_detail.png" class="code-img"> -->
              <div class="content-wrapper">
                <div> 微信<span class="iconfont"></span>关注“北京114预约挂号”</div>
                <div class="watch-wrapper"> 快速挂号，轻松就医</div>
              </div>
            </div>
          </div>
          <div class="info-wrapper">
            <div class="title-wrapper">
              <div class="block"></div>
              <div>挂号信息</div>
            </div>
            <div class="info-form">
              <el-form ref="form" >
                <el-form-item label="就诊人信息：">
                  <div class="content"><span>{{ orderInfo.patientName }}</span></div>
                </el-form-item>
                <el-form-item label="就诊日期：">
                  <div class="content"><span>{{ orderInfo.reserveDate }} {{ orderInfo.reserveTime == 0 ? '上午' : '下午' }}</span></div>
                </el-form-item>
                <el-form-item label="就诊医院：">
                  <div class="content"><span>{{ orderInfo.hosname }} </span></div>
                </el-form-item>
                <el-form-item label="就诊科室：">
                  <div class="content"><span>{{ orderInfo.depname }} </span></div>
                </el-form-item>
                <el-form-item label="医生职称：">
                  <div class="content"><span>{{ orderInfo.title }} </span></div>
                </el-form-item>
                <el-form-item label="医事服务费：">
                  <div class="content">
                    <div class="fee">{{ orderInfo.amount }}元
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="挂号单号：">
                  <div class="content"><span>{{ orderInfo.outTradeNo }} </span></div>
                </el-form-item>
                <el-form-item label="挂号时间：">
                  <div class="content"><span>{{ orderInfo.createTime }}</span></div>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div class="rule-wrapper mt40">
            <div class="rule-title"> 注意事项</div>
            <div>1、请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人承担；<br>
              <span style="color:red">2、【取号】就诊当天需在{{ orderInfo.fetchTime }}在医院取号，未取号视为爽约，该号不退不换；</span><br>
              3、【退号】在{{ orderInfo.quitTime }}前可在线退号 ，逾期将不可办理退号退费；<br>
              4、北京114预约挂号支持自费患者使用身份证预约，同时支持北京市医保患者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所使用的有效身份证件到院取号；<br>
              5、请注意北京市医保患者在住院期间不能使用社保卡在门诊取号。
            </div>
          </div>
          <div class="bottom-wrapper mt60" v-if="orderInfo.orderStatus == 0 || orderInfo.orderStatus == 1">
            <div class="button-wrapper">
              <div class="v-button white" @click="cancelOrder()">取消预约</div>
            </div>
            <div class="button-wrapper ml20" v-if="orderInfo.orderStatus == 0">
              <div class="v-button" @click="pay()">支付</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧内容 #end -->
      
      <!-- 微信支付弹出框 -->
      <el-dialog :visible.sync="dialogPayVisible" style="text-align: left" :append-to-body="true" width="500px" @close="closeDialog">
        <div class="container">
          <div class="operate-view" style="height: 350px;">
            <div class="wrapper wechat">
              <div>
                <img src="images/weixin.jpg" alt="">
                <!-- 显示支付二维码 -->
                <qriously :value="payObj.codeUrl" :size="220"/>
                <div style="text-align: center;line-height: 25px;margin-bottom: 40px;">
                  请使用微信扫一扫<br/>
                  扫描二维码支付
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
    <!-- footer -->
  </template>
  <script>
  import '~/assets/css/hospital_personal.css'
  import '~/assets/css/hospital.css'
  import orderInfo_Api from '@/api/order/orderInfo'
  import weixin_Api from '@/api/weixin'
  export default {
    data() {
      return {
        orderId: null,
        orderInfo: {
          param: {}
        },
        dialogPayVisible: false,
        payObj: {
          codeUrl:''
        },
        timer: null  // 定时器名称
      }
    },
    created() {
      this.orderId = this.$route.query.orderId
      this.init()
    },
    methods: {
      init() {
        orderInfo_Api.getOrders(this.orderId).then(response => {
          console.log(response.data);
          this.orderInfo = response.data
        })
      },

        //支付
        pay(){
        //支付二维码弹框显示
        this.dialogPayVisible = true
        weixin_Api.createNative(this.orderId).then(res =>{
          this.payObj = res.data
          if(this.payObj.codeUrl == ''){
            this.dialogPayVisible = false
            this.$message.error("支付错误")
          }else{
            //每间隔3秒查询支付状态接口
            this.timer = setInterval(() =>{
                this.queryPayStatus(this.orderId)
            },3000); 
          }
        })
      },

      //查询支付状态
      queryPayStatus(orderId){
        weixin_Api.queryPayStatus(orderId).then(res => {
          if(res.message == '支付中'){
            return
          }

          //清除定时器
          clearInterval(this.timer)
          window.location.reload()
        })
      },

      //关闭支付弹窗
      closeDialog(){
        if(this.timer){
          clearInterval(this.timer);
        }
      },

      //取消预约
      cancelOrder() {
        this.$confirm('确定取消预约吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          orderInfo_Api.cancelOrder(this.orderId).then(res => {
            this.$message.success('取消成功')
            this.init()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消操作'
          });          
        });
      }

    },
  }
  </script>
  <style>
    .info-wrapper {
      padding-left: 0;
      padding-top: 0;
    }
    .content-wrapper {
      color: #333;
      font-size: 14px;
      padding-bottom: 0;
    }
    .bottom-wrapper {
      width: 100%;
    }
    .button-wrapper {
      margin: 0;
    }
    .el-form-item {
      margin-bottom: 5px;
    }
    .bottom-wrapper .button-wrapper {
      margin-top: 0;
    }
  </style>
  